/* removed tailwind import to avoid missing package error */
html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
@custom-variant red (&:where([data-theme=red], [data-theme=red] *));

/* 彻底隐藏滚动条（可选） */
body {
  scrollbar-width: none; /* Firefox */
  /* 页面背景图 - 在主题切换时保持 */
  background: url('./Img/ttt.jpg') center center / cover no-repeat fixed;
  /* 确保主题变量能够正确传递 */
  background-color: var(--theme-bg, rgba(0, 0, 0, 0.8));
}
body::-webkit-scrollbar {
  width: 0; /* Chrome/Safari */
  height: 0;
}

/* 避免 canvas 作为行内元素导致的额外空隙 */
canvas {
  display: block;
}

/* 主题样式 */
[data-theme="dark"] {
  --theme-bg: rgba(0, 0, 0, 0.8);
  --theme-text: #ffffff;
  --theme-accent: #00ffff;
}

[data-theme="red"] {
  --theme-bg: rgba(252, 249, 249, 0.8);
  --theme-text: #333333;
  --theme-accent: #ff6b6b;
}

/* 应用主题样式到 box 元素 */
.box {
  background: var(--theme-bg);
  color: var(--theme-text);
}

/* 主题切换动画 */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* 输入框占位符样式 */
[data-theme="red"] input::placeholder {
  color: #666 !important;
}

[data-theme="dark"] input::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}


